<template>
  <div class="page">
    <m-header :title="langText&&langText.cpd" :canback="Boolean(1)"></m-header>
    <div class="body">
        <div class="sm_top">
        <p>{{langText&&langText.tctotalmoney}}： {{data&&data.price}} {{langText&&langText.usdt}}</p>
        <p>{{langText&&langText.totalrevenue}}： {{data&&data.money}} {{langText&&langText.fc}}</p>
        </div>

        <div class="sm_bot">
          <p class="title">{{data&&data.name_cn}}</p>
          <p class="money">{{langText&&langText.depositamount}}：{{data&&data.price}}{{langText&&langText.usdt}}</p>
          <div class="content">
            <div class="content_left">
              <p class="title">{{langText&&langText.contractdays}}</p>
              <p class="last"> {{data&&data.days}}{{langText&&langText.day}} </p>
            </div>
            <div class="content_right">
              <p class="title">{{langText&&langText.dailyincome}}</p>
              <p class="last"> {{data&&data.per2}}%~{{data&&data.per3}}%</p>
            </div>
          </div>
          <p class="bot_text">{{langText&&langText.currencymethod}}：{{data&&data.fs}}</p>
          <p class="bot_text">{{langText&&langText.startingtime}}：{{formatDate(data&&data.createtime)}}</p>
        </div>


        
        <button class="btn-submit btn-origin bot-btn" @click="$router.push({name:'UpLevel',query:{id}})">{{langText&&langText.upgrade}}</button>
    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner,Trade } from "@/server/server.js";
import { Load,Util } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { Hashrate,MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      allTxt:null,
      id:null,
      langText:null,
      data:{
        price:null,
        money:null,
        name_cn:null,
        days:null,
        per:null,
        fs:null,
        createtime:null
      }
    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.initData()
    this.myTcDetail()
  },
  methods: {
    initData(){
      this.id = this.$route.query.id;
      this.allTxt = Object.assign({},Hashrate,MyTxt,Hashrate)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    },
    formatDate(time){
      return Util.formatDate(time);
    },
    myTcDetail(){
      Trade.myTcDetail({id:this.id}).then(res=>{
        if(res.code==1){
          this.data = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    }
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .sm_top{
    width: 100%;
    height: 250px;
    background-color: #4EB6AD;
    padding: 40px 30px;
    position: relative;
    z-index: -99;
    p{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-top: 20px;
      &:first-child{ margin-top: 0 }
    }
    .right{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      border: 1px solid #fff;
      border-radius:10px;
      padding: 5px 15px;
      position: absolute;
      right: 60px;
      top: 60px;
    }
  }
  .sm_bot{
      width: 710px;
      border-radius: 10px;
      z-index: 99;
      margin:-52px 20px 60px;
      padding: 30px;
      background-color: #fff;
      .title{
        font-size:32px;
        font-family:PingFangSC-Medium,PingFangSC;
        font-weight:500;
        color:rgba(78,182,173,1);
      }
      .money{
        font-size:28px;
        font-weight:400;
        color:rgba(102,102,102,1);
        margin-top: 5px;
      }
      .content{
        p{ color: #333 }
        display: flex;
        justify-content: space-between;
        margin: 30px 0;
        >div{
          flex: 1;
          text-align: center;
          &:last-child{
            border-left: 1px solid #979797;
          }
          .last{ margin-top: 10px; }
          .title{ font-weight: 550;font-size: 28px; }
        }
      }
      .bot_text{
        font-size:28px;
        color:rgba(102,102,102,1);
      }
     
  }
  
  .bot-btn{
    width: 710px;
    margin-left: 20px;
    height: 88px;
    line-height: 88px;
    margin-bottom: 30px;
    border-radius: 10px;
    background-color: #4EB6AD;

    color: #fff;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>